<template>
    <div class="category" v-cloak>
        <div class="left">
            <mt-navbar v-model="selected">
                <mt-tab-item :id="item.id" v-for="item in leftlist" :key="item.id">{{item.categoryName}}</mt-tab-item>
            </mt-navbar>
        </div>
        <div class="right" >
            <mt-tab-container v-model="selected">
                <mt-tab-container-item :id="item.id" v-for="item in leftlist" :key="item.id">
                    <a href="javascipr:;" v-for="rightitem in rightlist" :key="rightitem.id">
                        <img :src="'http://127.0.0.1:3000/'+rightitem.brandLogo" alt="">
                        <p>{{rightitem.brandName}}</p>
                    </a>
                    <span v-show="rightlist.length===0" >没有数据</span>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
import { firstCategory, scoendCategory } from '@/api/index.js'
export default {
  data () {
    return {
      selected: '',
      leftlist: [],
      rightlist: []
    }
  },
  mounted () {
    firstCategory().then(res => {
      console.log(res)
      this.leftlist = res.rows
      this.selected = res.rows[0].id
      this.$store.state.title = '商品分类'
    })
  },
  watch: {
    selected () {
      scoendCategory(this.selected).then(res => {
        this.rightlist = res.rows
      })
    }
  }
}
</script>

<style lang='scss' scoped>
[v-cloak] {
  display: none;
}
.category {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 100px;
    .mint-navbar{
        display: flex;
        flex-direction: column;
    }
  }
  .right {
    flex: 1;
    padding: 0 10px;
     overflow: scroll;
     .mint-tab-container-item{
         display: flex;
         flex-wrap: wrap;
    a{
        width:33.33%;

        img{
            width: 100%;
            display: block;
        }
    }
     }
  }
}
</style>
